<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./assets/font-awesome/css/all.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hi Quick AI</title>
    <script src="./assets/javascript/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        body {
            height: 100vh;
            margin: 0; /* 去掉默认的边距 */
            padding: 0; /* 去掉默认的内边距 */
            display: flex; /* 使用 flexbox 布局 */
            flex-direction: column; /* 垂直排列内容 */
            min-height: 100vh; /* 确保 body 至少占满视口高度 */
            font-size: 14px;
        }
        body #app{
          height: 100%;
        }
        .iframePC {
            width: 100%; /* 设置 iframe 宽度为 100% */
            border: none; /* 去掉边框 */
            height: 100%;
        }
        .ai-tag {
          width: 208px;
          height: 40px;
          padding-right: 12px;
          border-radius: 6px;
          background: #171313;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          position: fixed;
          right: 20px;
          bottom: 28px;
          z-index: 9999;
        }
        .ai-tag .custom-text-prefix {
          font-weight: 400;
          font-size: 12px;
          line-height: 24px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          text-align: left;
          font-style: normal;
          color: #ADB5C1;
          text-transform: none;
          line-height: 38px;
        }
        .ai-tag .custom-text-sufix {
          font-weight: 700;
          font-size: 12px;
          line-height: 24px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          text-align: left;
          font-style: normal;
          color: #FFFFFF;
          text-transform: none;
          line-height: 38px;
        }
        .ai-tag img.img-logo {
          width: 22px;
          margin: 0 6px;
        }
        .ai-tag img.ai-tag-close {
          width: 8px;
          position: absolute;
          top: 6px;
          right: 6px;
          object-fit: none;
        }
    </style>
    <style>
      /* app样式 */
      .preview-suitable-app{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .preview-suitable-content-app{
        height: calc(100% - 12px);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .app-border{
        position: relative;
        border-radius: 30px 30px 30px 30px;
        border: 4px solid rgb(51, 51, 51);
        overflow:hidden;
      }
      .preview-suitable-app iframe{
        height: 100%;
        width: 100%;
        border: none; /* 去掉边框 */
      }
      .preview-web{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content:center;
        align-items: center;
        overflow: hidden;
      }
      .preview-web iframe{
        flex-shrink: 0
      }
    </style>

    <style>
      /* 页面顶部样式 */
      .w-70px{
        width: 70px;
      }
      .w-140px{
        width: 140px;
      }
      .w-260px{
        width: 260px;
      }
      .h-28px{
        height: 28px;
      }
      .h-48px{
        height: 48px;
      }
      .h-40px{
        height: 40px;
      }
      .h-32px{
        height: 32px;
      }
      .page-top{
        color: #333333;
      }
      .appName{
        font-size: 16px;
        margin-right: 30px;
      }
      .previewList{
        width: 140px;
        overflow: hidden !important;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .previewList .first-option {
        position: relative;
      }
      .previewList .first-option:after {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: -3px;
        left: 0;
        background-color: #dbdbdb;
      }
      .previewList .option-item:hover {
        background-color: #3C8EFF;
      }
      
      .previewList .option-item.selected {
        background-color: #3C8EFF;
      }
      /* 全局下拉框样式重置 */
      select.previewList {
        padding: 5px 11px;
      }
      select.previewList option {
        margin-bottom: 5px;
      }
      /* 禁用焦点样式 */
      select option:focus {
        outline: none !important;
        background-color: transparent !important;
      }
      select.previewList option:checked,
      select.previewList option:checked:focus {

      }
      .tool-right {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-right: 20px;
      }
      .ml-16px {
        margin-left: 16px;
      }
      .ml-10px {
        margin-left: 10px;
      }
      .mr-10px {
        margin-right: 10px;
      }
      .page{
        height: calc(100% - 48px);
      }
      .page.preview{
        height: 100%;
      }
      .page-content{
        background: #F2F3F6;
      }
      /* 页面列表 */
      .page-left{
        font-size: 12px;
        line-height: 16px;
        color: #333333;
      }
      .tree-menu {
        height: calc( 100% - 40px) ;
        overflow: auto;
      }
      .tip {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 410px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFFFFF;
        box-shadow: 0px 0px 20px 0px rgba(163,170,190,0.3);
        border-radius: 200px 200px 200px 200px;
        font-size: 14px;
        color: #3D3D3D;
        gap: 10px;
      }
    </style>
    <script src="./assets/css/tailwindcss.css"></script>
    <script src="./assets/javascript/tool.js"></script>
    <script src="./assets/javascript/initData.js"></script>
</head>
<body>
  <div id="app">
    <div class="page-top" v-if="!isPreview">
      <div class="flex justify-between items-center border-b h-48px">
        <div class="flex items-center">
          <h1 class="appName ml-16px font-bold">{{appName}}</h1>
          <p style="line-height: 16px;">当前页面：{{pageName}}</p>
        </div>
        <div class="flex items-center">
          <span class="mr-[8px] text-[#666666]">尺寸:</span>
          <select class="mr-[8px] rounded previewList w-140px h-28px outline-none bg-[#F3F3F3] pl-[7px] pr-[11px] text-[13px]" v-model="previewSize">
            <option :class="`option-item w-[140px] text-[13px] h-[26px] mb-[5px] px-[6px] hover:bg-[#0000000a] ${!index && 'first-option' || ''} ${'selected'&& previewSize === opt.value||'' }`" v-for="(opt, index) in previewSizeOptions" :key="opt.value" :value="opt.value" :w="opt.w" :h="opt.h">{{opt.label}}</option>
          </select>
          <input type="text" @change="changeAutoSize" :disabled="!(previewSize==='auto')" v-model="previewSizeW" class="rounded text-center outline-none w-70px h-28px bg-[#F3F3F3]">
          <span>×</span>
          <input type="text" @bur="changeAutoSize" :disabled="!(previewSize==='auto')" v-model="previewSizeH" class="rounded text-center outline-none w-70px h-28px bg-[#F3F3F3]">
        </div>
        <div class="tool-right">
          <img @click="toPreview" src="./assets/img/show.png" alt="">
          <img @click="changeCurrentIndex(-1)" :src="currentIndex === 0 ? './assets/img/left-not.png' : './assets/img/left-on.png'" alt="">
          <img @click="changeCurrentIndex(1)" :src="currentIndex === pageList.length - 1 ? './assets/img/right-not.png': './assets/img/right-on.png'" alt="">
        </div>
      </div>
    </div>
    <div :class="['page', 'flex', {'preview': isPreview || !appName}]">
      <div class="page-left flex-[0_0_197px] border-r" v-if="!isPreview && appName">
        <div class="border-b h-40px flex items-center">
          <h2 class="ml-12px px-4 font-black">页面列表</h2>
        </div>
        <div class="tree-menu px-[10px] pt-[10px]">
          <tree-node 
            v-for="(node, index) in treeData"
            :key="node.id"
            :node="node"
             @node-click="handleChangePage"
            :selectId="pageUuid" >
          </tree-node>
        </div>
      </div>
      <div class="page-content" :style="{width:!isPreview && appName ? 'calc(100vw - 197px)': '100%', padding: appName && !isPreview ? '5px' : '', background:pageType === 'app'?'#ffffff':'#F2F3F6'}">
        <div v-if="pageType === 'app'" class="preview-suitable-app">
          <div class="preview-suitable-content-app">
            <div  class="app-border">
              <div :style="{width:previewSizeW+'px',height:previewSizeH+'px'}">
                <template v-if="isHtml">
                  <iframe @load="loadHtmlIframe" id="iframeApp" style="border: none;"></iframe>
                </template>
                <template v-else>
                    <iframe id="vueIframeApp" style="border: none;" :src="url" @load="vueIfameloaded"></iframe>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="preview-web">
          <template v-if="isHtml">
          <iframe id="iframe" @load="loadHtmlIframe" :style="{width:previewSizeW+'px',height:previewSizeH+'px'}" class="iframePC" style="border: none;"></iframe>
          </template>
          <template v-else>
              <iframe id="vueIframeWeb" :style="{width:previewSizeW+'px',height:previewSizeH+'px'}" :src="url" @load="vueIfameloaded"></iframe>></iframe>
          </template>
        </div>
      </div>
    </div>
  </div>

  <script src="./assets/javascript/index.js"></script>
  <script>
    window.addEventListener('load', function() {
        document.querySelector('.ai-tag img.ai-tag-close')?.addEventListener('click', (e) => {
          e.stopPropagation()
          document.querySelector('.ai-tag').style.display = 'none'
        })
        document.querySelector('.ai-tag')?.addEventListener('click', () => {
          window.open(`${window.location.origin}/#/?ci=fx`)
        })
    });
  </script>
</body>

</html>